<template>
  <section class="w-full">
    <SectionTitle title="热门角色" :more="true" />
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
      <RoleCard
        v-for="r in roles"
        :key="r.id"
        v-bind="r"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import SectionTitle from './SectionTitle.vue'
import RoleCard from './RoleCard.vue'
import { characterInfo } from '@/api'
import type { RoleInfo } from '@/api/interface'

const roles = ref<RoleInfo[]>([])

// 获取角色列表数据
const fetchRoles = async () => {
  try {
    console.log('开始获取角色列表数据...')
    const response: any = await characterInfo.list({
      pageNum: 1,
      pageSize: 8
    })
    console.log('角色列表接口响应:', response)
    
    if (response.code === 0 && response.data?.list) {
      roles.value = response.data.list
      console.log('角色列表数据更新成功:', roles.value.length, '个角色')
    }
  } catch (error) {
    console.error('获取角色列表失败:', error)
    // 失败时使用默认数据
    roles.value = [
      { 
        id: 1, 
        name: '智能助手小艾', 
        intro: '专业的工作助手，帮你提升效率', 
        image: 'https://picsum.photos/seed/ai1/128/128',
        voice: 'en_female_001',
        isFavorited: 0,
        prompt: '你是一个专业的工作助手',
        category: '工作助手',
        viewCount: 1200,
        isDel: 0,
        createTime: null,
        updateTime: null,
        tags: '助手,效率,文案'
      },
      { 
        id: 2, 
        name: '学习导师', 
        intro: '耐心的学习伙伴，陪你一起成长', 
        image: 'https://picsum.photos/seed/ai2/128/128',
        voice: 'en_female_002',
        isFavorited: 0,
        prompt: '你是一个学习导师',
        category: '教育',
        viewCount: 856,
        isDel: 0,
        createTime: null,
        updateTime: null,
        tags: '学习,教育,成长'
      },
      { 
        id: 3, 
        name: '创意写手', 
        intro: '激发灵感的创作伙伴，释放想象力', 
        image: 'https://picsum.photos/seed/ai3/128/128',
        voice: 'en_female_003',
        isFavorited: 0,
        prompt: '你是一个创意写手',
        category: '创意写作',
        viewCount: 654,
        isDel: 0,
        createTime: null,
        updateTime: null,
        tags: '创作,写作,灵感'
      },
      { 
        id: 4, 
        name: '心理咨询师', 
        intro: '温暖的倾听者，给你心理的慰藉', 
        image: 'https://picsum.photos/seed/ai4/128/128',
        voice: 'en_female_004',
        isFavorited: 0,
        prompt: '你是一个心理咨询师',
        category: '情感陪伴',
        viewCount: 432,
        isDel: 0,
        createTime: null,
        updateTime: null,
        tags: '心理,情感,陪伴'
      },
    ]
  }
}

// 说明：移除由父组件强制刷新触发的事件机制后，这里仅在挂载时拉取一次。

// 组件挂载时获取数据
onMounted(() => {
  console.log('HotRoles 组件挂载，开始获取数据')
  fetchRoles()
})
</script>


